import {ModifyPasswordBodyModel} from "../data";
import React, {FC, useCallback} from "react";
import {Button, Form, Input, message, Modal} from "antd";
import FormItem from "antd/es/form/FormItem";
import {DialogOperate} from "@/global";
import accountService from '@/pages/sys/account/service';

/** 系统修改密码*/

const ModifyPasswordEdit: FC<DialogOperate> = (props) => {
  const {visible, hide} = props;

  const setSubmit = useCallback((newModel) => {
    const submitSuccessMessage = '密码修改成功';
    accountService.modifyPassword(newModel).then(r => {
      if (r.success) {
        submitSuccessMessage && message.success({content: submitSuccessMessage, duration: 1});
        hide();
      }
    }).catch(() => {
    });
  }, []);

  /** 表单布局 */
  const formLayout = {
    labelCol: {span: 7},
    wrapperCol: {span: 13},
  };
  const [form] = Form.useForm();

  const renderFooter = () => {
    return (
      <>
        <Button onClick={hide}>取消</Button>
        <Button type="primary" onClick={() => form.submit()}>
          确认
        </Button>
      </>
    )
  };
  return (
    <Modal
      width={640}
      bodyStyle={{padding: '32px 40px 48px'}}
      destroyOnClose
      title="修改密码"
      visible={visible}
      onCancel={hide}
      footer={renderFooter()}
    >
      <Form
        {...formLayout}
        form={form}
        onFinish={(values) => {
          setSubmit(values as ModifyPasswordBodyModel)
        }}
      >
        <FormItem
          name="currentPassword"
          label="当前密码："
          rules={[{required: true, message: '请输入当前密码'}]}
        >
          <Input.Password maxLength={100}/>
        </FormItem>
        <FormItem
          name="newPassword"
          label="新密码："
          rules={[{required: true, message: '请输入新密码'}]}
        >
          <Input.Password maxLength={100}/>
        </FormItem>
        <FormItem
          name="pwd2"
          label="确认密码："
          dependencies={['newPassword']}
          rules={[
            {required: true, message: '请输入确认密码'},
            ({getFieldValue}) => ({
              validator(rule, value) {
                if (!value || getFieldValue('newPassword') === value) {
                  return Promise.resolve();
                }
                return Promise.reject('确认密码必须与密码输入一致!');
              },
            }),
          ]
          }
        >
          <Input.Password maxLength={100}/>
        </FormItem>
      </Form>
    </Modal>
  )
}

export default ModifyPasswordEdit;
